<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="./vue.global.js"></script>
    <link rel="stylesheet" href="./index.css" />
    <link rel="stylesheet" href="./table.css" />
    <link rel="stylesheet" href="./pugong.css" />
    <link rel="stylesheet" href="./utils.css" />
    <script src="./index.full.js"></script>

    <script>
      //适配代码
      (function (doc, win) {
        var docEI = doc.documentElement,
          resizeEvt = "orientationchange" in window ? "orientataionchange" : "resize",
          recalc = function () {
            var clientWidth = docEI.clientWidth;
            if (!clientWidth) return;
            //100是字体大小，1536是开发时浏览器窗口的宽度，等比计算
            docEI.style.fontSize = 100 * (clientWidth / 1536) + "px";
          };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener("DOMContentLoaded", recalc, false);
      })(document, window);
    </script>
    <style>
      * {
        /* margin: 0;
        padding: 0; */
        font-size: 0.25rem;
      }

      .fontw {
        font-weight: 700;
      }
    </style>
  </head>

  <body>
    <div id="app" class="table-content text-left">
      <div class="text-center fontw" style="font-size: 0.25rem; margin-bottom: 50px">职业健康危害告知书</div>

      <div style="font-size: 16px; margin-bottom: 100px">
        <div class="mb-20">1、常见职业病</div>
        <div class="text-indent mb-20">(1)水泥尘肺：水泥运输、投料、拌和、浇捣作业。</div>
        <div class="text-indent mb-20">(2)电焊工尘肺：手工电弧焊、气体保护焊、气割作业。</div>
        <div class="text-indent mb-20">(3)电光性眼炎、白内障：电、气焊作业产生的紫外线照射。</div>
        <div class="text-indent mb-20">(4)噪声聋:打孔、混合搅拌、电锯等作业。</div>
        <div class="text-indent mb-20">(5)苯中毒:油漆、防水作业。</div>
        <div class="text-indent mb-20">(6)中暑：伏天室内外作业。</div>
        <div class="text-indent mb-20">(7)手臂振捣病：混凝土振捣作业、操作手持转动工具。</div>
        <div class="mb-20">2、劳动者的权利和义务</div>
        <div class="text-indent mb-20">(1)有权获得职业安全卫生教育、培训。</div>
        <div class="text-indent mb-20">(2)有权获得职业安全卫生健康检查、职业病诊疗、康复等防治工作。</div>
        <div class="text-indent mb-20">(3)有权要求用人单位提供符合要求的职业安全防护设施和个人防护用品。</div>
        <div class="text-indent mb-20">(4)有权拒绝违章指挥和强令没有职业安全防护措施的作业。</div>
        <div class="text-indent mb-20">(5)有义务学习和掌握职业安全卫生知识，遵守有关职业安全卫生法律、法规和操作规程，正确使用和维护职业安全防护设施和个人防护用品，发现职业安全危害。</div>
        <div class="text-indent mb-20">(6)隐患应当及时报告。</div>
        <div class="mb-20">3、用人单位的义务</div>
        <div class="text-indent mb-20">(1)采取有效的职业安全防护措施，为劳动者提供防护用品。</div>
        <div class="text-indent mb-20">(2)对劳动者进行职业安全岗前培训和定期培训，指导劳动者正确使用防护设施和个人防护用品。</div>
      </div>

      <div class="d-flex flex-row mt-2 justify-content-end">
        <div style="padding-right: 80px" class="flex">
          <div @click="setUpEquipment('dangerForm.acceptSign','TaskSignFinger')">接受告知人（签字）:</div>
          <el-image v-show="dangerForm.acceptSign" class="sign_img" :src="dangerForm.acceptSign" fit="fill"></el-image>
        </div>
      </div>
    </div>
    <script>
      const { createApp, reactive, toRefs, ref, onMounted } = Vue;
      const vue3Composition = {
        setup() {
          const dangerForm = ref({
            acceptSign: "", //接受告知人
          });

          window.setSign = (event) => {
            dangerForm.value[event.key] = event.img;
          };

          window.getData = (event) => {
            return dangerForm.value;
          };
          window.setData = (data) => {};

          //peopleForm.sign
          const setUpEquipment = (key, type) => {
            window.parent.childListener({
              key,
              type,
            });
          };
          return {
            dangerForm,
            setUpEquipment,
          };
        },
      };
      const app = createApp(vue3Composition).use(ElementPlus).mount("#app");
    </script>
  </body>
</html>
